<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等待旋转效果</title>
    <link rel="stylesheet" href="../extends/font-awesome-4.7.0/css/font-awesome.css">
    <style type="text/css">
        @-webkit-keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .div-waiting{
            position: fixed;
            z-index: 998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 1;
            background: rgba(0,0,0,0.2);
            vertical-align: middle;
            text-align: center;
        }
        .icon-waiting{
            position: relative;
            top: 48%;
            width: 5rem;
            height: 5rem;
            margin: 0 auto;
            border-radius: 50%;
            border: 0.5rem solid rgba(21, 21, 21, 0.4);
            border-top-color: #e1e1e1;
            -webkit-animation: 1.5s spin infinite linear;
            animation: 1.5s spin infinite linear;
        }
        .icon-position{
            position: relative;
            top: 48%;
            margin: 0 auto;
            font-size: 30px;
        }
        button{
            padding: 6px 12px;
            margin: 10px;
            background: #00bbee;
            border: 1px solid #00bfff;
            border-radius: 3px;
        }
    </style>
</head>
<body>
<form action="." method="POST">
            <input type="text" name="anything" placeholder="Type anything here">
    <button type="submit" name="submit" onclick="showWaiting()">显示</button>
    <button onclick="closeWaiting()" style="z-index: 10000;position: relative;">关闭</button>
    </form>
</body>

<script type="text/javascript">
    function showWaiting(){
        var node=document.createElement("div");  //创建一个div元素节点，作为整个背景的容器
        var nodeClass=document.createAttribute("class"); //创建class元素属性
        var nodeStyle = document.createAttribute("style"); //创建style元素属性
        var nodeName = document.createAttribute("name"); //创建name元素属性
        nodeName.value = "divWaiting"; //给元素节点命名
        nodeClass.value = "div-waiting"; //元素属性赋值
        nodeStyle.value = "height:"+window.innerHeight + "px; width:"+window.innerWidth+"px;";
        node.setAttributeNode(nodeClass); //设置元素节点的属性及值
        node.setAttributeNode(nodeStyle);
        node.setAttributeNode(nodeName);
        var iconNode = document.createElement("div");  //创建一个div元素节点，作为旋转图标的容器
        var iconClass = document.createAttribute("class");
        iconClass.value = "icon-waiting";
        //iconClass.value = "fa fa-spinner fa-pulse icon-position";
        iconNode.setAttributeNode(iconClass);

        node.appendChild(iconNode);  //将图标节点放到整个背景的元素节点
        document.body.appendChild(node); //将整个背景div插入到body中
    }

    function closeWaiting(){
        var wait = document.getElementsByName("divWaiting"); //获取name为divWaiting的元素节点
        console.log(wait);
        //遍历所有的节点，将body中的所有等待旋转效果去掉
        for(var i=wait.length - 1; i>=0; i--){
            document.body.removeChild(wait[i]);
        }
    }
</script>
</html>
